import config from '../config'
import positions from '../service/position'

abstract class CanvasAbstract {
  public models: Array<IModel> = []
  abstract num(): number
  abstract model(): ModelConstructor | BulletModelConstructor
  abstract render(): void

  constructor(
    protected name: string,
    protected app = document.querySelector<HTMLDivElement>('#app')!,
    protected el = document.createElement('canvas'),
    public ctx = el.getContext('2d')!
  ) {
    this.createCanvas()
  }
  protected createCanvas() {
    this.el.width = config.canvas.width
    this.el.height = config.canvas.height
    this.el.setAttribute('name', this.name)
    this.app.insertAdjacentElement('afterbegin', this.el)
  }
  // 根据批量坐标创建模型
  protected createModels() {
    positions.positionCollection(this.num()).forEach((position) => {
      const model = this.model() as ModelConstructor
      const instance = new model(position.x, position.y)
      this.models.push(instance)
    })
  }
  // 渲染模型到画布
  public renderModels() {
    this.ctx.clearRect(0, 0, config.canvas.width, config.canvas.height)
    this.models.forEach((model) => {
      model.render()
      // this.canvas.drawImage(model.image(), model.x, model.y, config.model.width, config.model.height)
    })
  }
  public removeModel(model: IModel) {
    this.models = this.models.filter((m) => m !== model)
  }
}
export default CanvasAbstract
